$(function(){
    chartMap();
    charBar1('echarts2');
    charBar2('echarts3');
    charPie1('echarts4');
    charPie2('echarts5');
    charBar4('echarts7');
    charBar5('echarts8');
    charBar6('echarts9');
});

// 标题样式定义
var titleStyle = {
    color:"#333",
    fontSize:"12",
    fontWeight: "bold"
}
// 饼图样式定义
var dataStyle = {
    normal: {
        label: {
            show: true,
            formatter: "{b}：{c}({d}%)",
        },
        labelLine: {
            show: true
        },
        shadowBlur: 40,
        shadowColor: 'rgba(40, 40, 40,0.3)',
    }
};

// 运力分布图
function chartMap(){
    var uploadedDataURL = "json/visual-map.json";
    var myChart = echarts.init(document.getElementById('echarts1'));
    myChart.showLoading();
    $.getJSON(uploadedDataURL, function (yunliData) {
        myChart.hideLoading();

        yunliData = yunliData.map(function (serieData, idx) {
            var px = serieData[0] / 1000;
            var py = serieData[1] / 1000;
            var res = [[px, py]];

            for (var i = 2; i < serieData.length; i += 2) {
                var dx = serieData[i] / 1000;
                var dy = serieData[i + 1] / 1000;
                var x = px + dx;
                var y = py + dy;
                res.push([x, y, 1]);
                px = x;
                py = y;
            }
            return res;
        });
        myChart.setOption(option = {
            legend: {
                left: '20',
                bottom: '20',
                data: ['物流公司', '客户'],
                textStyle: {
                    color: '#000'
                }
            },
            geo: {
                name: '运力分布',
                type: 'scatter',
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        // areaColor: '#323c48',
                        areaColor: '#dcdcdc',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#ccc'
                    }
                }
            },
            series: [{
                name: '客户',
                type: 'scatter',
                coordinateSystem: 'geo',
                symbolSize: 5,
                large: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 2,
                        shadowColor: 'rgba(0,51,102, .8)',
                        color: 'rgba(0,51,102, .8)'
                    }
                }
            }, {
                name: '物流公司',
                type: 'scatter',
                // type:"effectScatter",           //特效散点图
                // rippleEffect:{                  // 涟漪特效相关配置。
                //     period: 5,                  // 动画的时间。
                //     scale: 3,                   // 动画中波纹的最大缩放比例。
                //     brushType: 'stroke',        // 波纹的绘制方式，可选 'stroke' 和 'fill'。
                // },
                coordinateSystem: 'geo',
                symbolSize: 5,
                large: true,
                itemStyle: {
                    normal: {
                        shadowBlur: 2,
                        shadowColor: 'rgba(204,51,51, .8)',
                        color: 'rgba(204,51,51, .8)'
                    }
                },
                data: yunliData[1]
            }]
        });
    });
}

// 货主发货量条形图
function charBar1(el, data){
    var myChart2 = echarts.init(document.getElementById(el || 'baidumap4'));
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: "{b}<br>{a}：{c}万件",
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '0',
            right: '40',
            bottom: '30',
            top:'10',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            name: '万件',
            show: true,
            axisLabel: {
                textStyle: {
                    fontSize: '12',
                },
                // rotate:30, //刻度旋转度角
            },
            // axisLine: {
            //     show: false,
            //     lineStyle:{
            //         color:'#fff',
            //     }
            // },          
        },
        yAxis: {
            type: 'category',
            axisTick: {
                show: false
            },
            data: ['江苏恒泰药业有限公司','洛阳世鸿药业有限公司','山西医大方舟药业有限公司','普宁柏利源药业有限公司','徐州三江药业有限公司']
        },
        series: [
            {
                name: '发货总件数',
                type: 'bar',
                barWidth: '15px',
                itemStyle:{
                    normal:{
                        color:'#ffd8b6',
                        label:{
                            show: false,
                            position: 'bottom'
                        }
                    },
                    emphasis: { 
                        color:'#ffb77a',
                    },
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        textStyle: {
                            color: "#333"
                        }
                    }
                },
                data: [120, 160, 180, 190, 200]
            }
        ]
    };
    myChart2.setOption(option);

    // 处理点击事件并且跳转到相应的百度搜索页面
    myChart2.on('click', function (params) {
        var name=params.name;  
        if(name == "江苏恒泰药业有限公司"){
            // window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
            window.open('http://localhost:3020/air_waybill.html')
        }else if(name == "洛阳世鸿药业有限公司"){
            window.open('http://localhost:3020/tree.html')
        }
        
    });
}

// 物流公司承运量条形图
function charBar2(el, data){
    var myChart3 = echarts.init(document.getElementById(el || 'baidumap4'));
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: "{b}<br>{a}：{c}万件",
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '0',
            right: '40',
            bottom: '30',
            top:'10',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            name: '万件',
            show: true,
            axisLabel: {
                textStyle: {
                    fontSize: '12',
                },
                // rotate:30, //刻度旋转度角
            } 
        },
        yAxis: {
            type: 'category',
            data: ['兰州航路货运','武汉星辰货运','江西空港','七曜航网','飞达航空']
        },
        series: [
            {
                name: '承运总件数',
                type: 'bar',
                barWidth: '15px',
                itemStyle:{
                    normal:{
                        color:'#88a3de',
                        barBorderWidth: 1,            // 柱条边线线宽，单位px，默认为1
                        label:{
                            show: false,
                            position: 'bottom'
                        }
                    },
                    emphasis: { 
                        color:'#5a78b8',
                    },
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        textStyle: {
                            color: "#333"
                        }
                    }
                },
                data: [120, 160, 180, 190, 200]
            }
        ]
    };
    myChart3.setOption(option);
}

// 品类占比饼图
function charPie1(el, data){
    var myChart4 = echarts.init(document.getElementById(el || 'baidumap4'));
    option = {
        title: {
            text:"品类占比（万元）",
            x: 'center', 
            y: 'bottom',
            textStyle: titleStyle
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b}<br>{c}万元 ({d}%)"
        },
        legend: {
            orient: 'vertical',
            show: false,
            x: 'left',
            data: ['药品', '中药材', '冷藏品', '医疗器械', '后勤物资', '消毒用品']
        },
        color: ['#ff2949', '#12b7f5', '#9ad100', '#00ade4', '#ff9e3e', '#88a3de'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['30%', '50%'],
                itemStyle: dataStyle,
                data: [{
                    value: 135,
                    name: '药品'
                }, {
                    value: 1048,
                    name: '中药材'
                }, {
                    value: 251,
                    name: '冷藏品'
                }, {
                    value: 147,
                    name: '医疗器械'
                }, {
                    value: 102,
                    name: '后勤物资'
                }, {
                    value: 102,
                    name: '消毒用品'
                }]
            }
        ]
    };
    myChart4.setOption(option);
}

// 地区占比饼图
function charPie2(el, data){
    var myChart5 = echarts.init(document.getElementById(el || 'baidumap4'));
    option = {
        title: {
            text:"地区占比（万元）",
            x: 'center', 
            y: 'bottom',
            textStyle: titleStyle
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b}<br>{c}万元 ({d}%)"
        },
        legend: {
            orient: 'vertical',
            show: false,
            x: 'left',
            data: ['湖南', '湖北', '广东', '深圳', '上海', '北京']
        },
        color: ['#00e2d5', '#46a2eb', '#7143c5', '#e07d4e', '#4877f1', '#01949b'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['30%', '50%'],
                itemStyle: dataStyle,
                data: [{
                    value: 135,
                    name: '湖南'
                }, {
                    value: 1048,
                    name: '湖北'
                }, {
                    value: 251,
                    name: '广东'
                }, {
                    value: 147,
                    name: '深圳'
                }, {
                    value: 102,
                    name: '上海'
                }, {
                    value: 102,
                    name: '北京'
                }]
            }
        ]
    };
    myChart5.setOption(option);
}

// 地区发货量条形图
function charBar4(el, data){
    var myChart7 = echarts.init(document.getElementById(el || 'baidumap4'));
    option = {
        // title: {
        //     text:"地区发货量TOP5",
        //     x: 'center', 
        //     y: 'top',
        //     textStyle: titleStyle
        // },
        tooltip: {
            trigger: 'axis',
            formatter: "{b}<br>{a}：{c}万件",
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '0',
            right: '40',
            bottom: '30',
            top:'10',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            name: '万件',
            show: true,
            axisLabel: {
                textStyle: {
                    fontSize: '12',
                },
                // rotate:30, //刻度旋转度角
            } 
        },
        yAxis: {
            type: 'category',
            data: ['湖北','广东','深圳','上海','北京']
        },
        series: [
            {
                name: '发货',
                type: 'bar',
                barWidth: '15px',
                itemStyle:{
                    normal:{
                        color:'#87db8c',
                        label:{
                            show: false,
                            position: 'bottom'
                        }
                    },
                    emphasis: { 
                        color:'#67c36d',
                    },
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        textStyle: {
                            color: "#333"
                        }
                    }
                },
                data: [2000, 5000, 9000, 10000, 13000]
            }
        ]
    };
    myChart7.setOption(option);
}

// 地区收货量条形图
function charBar5(el, data){
    var myChart8 = echarts.init(document.getElementById(el || 'baidumap4'));
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: "{b}<br>{a}：{c}万件",
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '0',
            right: '40',
            bottom: '30',
            top:'10',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            name: '万件',
            show: true,
            axisLabel: {
                textStyle: {
                    fontSize: '12',
                },
                // rotate:30, //刻度旋转度角
            } 
            // splitNumber:5
            // splitLine:{  
            //     show:false,  
            // },
        },
        yAxis: {
            type: 'category',
            data: ['湖北','广东','深圳','上海','北京'],
            
        },
        series: [
            {
                name: '收货',
                type: 'bar',
                barWidth: '15px',
                itemStyle:{
                    normal:{
                        color:'#7dd2f3',
                        label:{
                            show: false,
                            position: 'bottom'
                        }
                    },
                    emphasis: { 
                        color:'#00aaeb',
                    },
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        textStyle: {
                            color: "#333"
                        }
                    }
                },
                data: [2000, 5000, 9000, 10000, 13000]
            }
        ]
    };
    myChart8.setOption(option);
}
// 传世运营货量
function charBar6(el, data){
    var myChart9 = echarts.init(document.getElementById(el || 'baidumap4'));
    option = {
        tooltip: {
            trigger: 'axis',
            formatter: "{b}<br>{a}：{c}万件",
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '0',
            right: '40',
            bottom: '10',
            top:'10',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            name: '万件',
            show: true,
            axisLabel: {
                textStyle: {
                    fontSize: '12',
                },
            }
        },
        yAxis: {
            type: 'category',
            data: ['传世运营','总货量'],
            
        },
        series: [
            {
                name: '2018年 传世运营货量',
                type: 'bar',
                barWidth: '15px',
                itemStyle:{
                    normal:{
                        color:'#26A2A4',
                        label:{
                            show: false,
                            position: 'bottom'
                        }
                    },
                    emphasis: { 
                        color:'#26A2A4',
                    },
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        textStyle: {
                            color: "#333"
                        }
                    }
                },
                data: [6, 44]
            }
        ]
    };
    myChart9.setOption(option);
}